<template>
  <absolute-container class="p-[20px]">
    <page-main class="flex h-full flex-col !bg-transparent">
      <div class="rounded-[4px] bg-[#fff] p-[16px] pb-[0]" style="box-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.08)">
        <QueryForm ref="refQueryForm" :getDataList="getDataList"></QueryForm>
      </div>

      <div
        class="mt-[16px] flex min-h-[0px] flex-1 flex-col rounded-[4px] bg-[#fff] px-[16px] pb-0 pt-[16px]"
        style="box-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.08)"
      >
        <el-table height="100%" :data="dataList">
          <el-table-column type="index" label="序号" width="60" :index="columnIndex" />
          <el-table-column :prop="PROPS.id" :label="LABELS.id" min-width="180" />
          <el-table-column :prop="PROPS.user" :label="LABELS.user" min-width="180" />
          <el-table-column :prop="PROPS.ip" :label="LABELS.ip" min-width="180" />
          <el-table-column
            :prop="PROPS.timeConsuming"
            :label="LABELS.timeConsuming"
            :formatter="(row, column, cellValue) => `${cellValue}ms`"
            min-width="180"
          />
          <el-table-column :prop="PROPS.type" :label="LABELS.type" min-width="180" />
          <el-table-column :prop="PROPS.module" :label="LABELS.module" min-width="180" />
          <el-table-column :prop="PROPS.result" :label="LABELS.result" min-width="180" />
          <el-table-column :prop="PROPS.content" :label="LABELS.content" min-width="180" />
          <el-table-column
            :prop="PROPS.createdAt"
            :label="LABELS.createdAt"
            :formatter="_formatterDatetime"
            min-width="180"
          />
          <el-table-column class-name="!px-[0px]" label="操作" align="left" fixed="right" width="60">
            <template #default="{ row }">
              <div class="flex">
                <span class="cursor-pointer text-[#1D7FF2]" @click="onDetail(row)">详情</span>
              </div>
            </template>
          </el-table-column>
          <template slot="empty">
            <t-empty-data />
          </template>
        </el-table>
        <div class="addShadow relative -left-[16px] -top-[1px] z-50 w-[calc(100%+32px)]">
          <el-pagination
            :current-page="pagination.page"
            :total="pagination.total"
            :page-size="pagination.size"
            :page-sizes="pagination.sizes"
            :layout="pagination.layout"
            :hide-on-single-page="false"
            background
            @size-change="onSizeChange"
            @current-change="onCurrentChange"
          />
        </div>
      </div>
    </page-main>

    <DetailDrawer :id="id" v-model="drawerVisible" @on-submit-success="getDataList" />
  </absolute-container>
</template>

<script>
import { isArray, toDateString } from "xe-utils";
import config from "./config";
import QueryForm from "./components/QueryForm.vue";
import DetailDrawer from "./components/DetailDrawer.vue";
import paginationMixin from "@/mixin/pagination";
import tableMixin from "@/mixin/table";
import { systemOperateLogList } from "@/api/operation-log";

export default {
  name: "OperationLog",
  components: { DetailDrawer, QueryForm },
  mixins: [paginationMixin, tableMixin],
  data() {
    return {
      ...config,
      id: "",
      dataList: [],
      drawerVisible: false,
    };
  },
  computed: {},
  mounted() {
    this.getDataList();
  },
  methods: {
    getDataList(param) {
      const params = this.getParams(param);
      const dateArray = params[config.PROPS.createdAt];
      if (isArray(dateArray)) {
        const [start, end] = dateArray;
        if (start && end) {
          params.operateTimeStart = toDateString(start);
          params.operateTimeEnd = toDateString(end);
        }
      }
      delete params[config.PROPS.createdAt];
      systemOperateLogList(params).then((res) => {
        this.dataList = res.content;
        this.pagination.total = res.totalElements;
      });
    },
    onDetail(row) {
      this.id = row.id;
      this.drawerVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.addShadow {
  display: inline-flex;
  justify-content: flex-end;
  height: 68px;
  padding: 16px;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 -1px 4px 0 rgb(0 0 0 / 0.08);
}
</style>
